<template>
  <div>
    <MusicList title="今日推荐" v-if="todayRecommend.length>0" :data="todayRecommend"/>
    <MusicList title="热门推荐" v-if="hotMusic.length>0" :data="hotMusic"/>
    <MusicList title="摇滚歌曲" v-if="rockMusic.length>0" :data="rockMusic"/>
    <MusicList title="经典歌曲" v-if="oldMusic.length>0" :data="oldMusic"/>
  </div>
</template>

<script>
    import MusicList from "../../components/Home/MusicList";
    export default {
      name: "HomeListData",
      components: {MusicList},
      data() {
        return {
          todayRecommend: [],
          hotMusic: [],
          rockMusic: [],
          oldMusic: []
        }
      },
      methods: {
        //加载今日推荐
        loadRecommendToday() {
          this.$api.home.getSongPageList({
            current: 1,
            size: 6
          })
          .then(res => {
            this.todayRecommend = res.data.data.records;
          });
        },
        //加载热门歌曲
        loadHotMusic() {
          this.$api.home.getSongPageList({
            current: 2,
            size: 6
          })
          .then(res => {
            this.hotMusic = res.data.data.records;
          });
        },
        loadRockMusic() {
          this.$api.home.getSongPageList({
            current: 7,
            size: 3
          })
            .then(res => {
              this.rockMusic = res.data.data.records;
            });
        },
        loadOldMusic() {
          this.$api.home.getSongPageList({
            current: 3,
            size: 6
          })
            .then(res => {
              this.oldMusic = res.data.data.records;
            });
        }
      },
      mounted() {
        //加载数据
        this.loadRecommendToday()
        this.loadHotMusic()
        this.loadRockMusic()
        this.loadOldMusic()
      }
    }
</script>

<style scoped>

</style>
